<template>
  <a-form-model ref="form_" :model="model" :rules="validatorRules_" slot="detail">
    <div class="sku-title">
      产品图片
      <a-button type="danger" v-if="!originModel.productType && model.productType === '2'" @click="getColorList" style="margin-left: 10px;">获取颜色</a-button>
    </div>
    <a-row style="margin-top: 15px;">
      <div class="product-img">
        <div v-for="(item, index) in skuList" :key="index">
          <a-col :span="24">
            <a-button @click="currentIndex = index">{{ item.colorDesc || item.color }}</a-button>
          </a-col>
          <div v-show="currentIndex == index">
            <a-col :span="24" v-for="(itemcur, indexcur) in item.imageList" :key="indexcur">
              <a-button icon="folder-open" type="primary" @click="handleImg(itemcur.title)" style="margin-bottom: 10px;">{{ itemcur.title }}</a-button>
              <j-upload-oss v-model="itemcur.imageList" fileType="image" bizPath="product" v-if="itemcur.imageList && itemcur.imageList.length" :class="{customUploadOss: itemcur.title === '元素图'}"></j-upload-oss>
              <div style="color: red;" v-if="itemcur.key === 'elementImageList' && isShow">请上传元素图!</div>
            </a-col>
          </div>
        </div>
      </div>
    </a-row>

    <product-library-sku-child-modal ref="modalForm" @ok="modalFormOk"></product-library-sku-child-modal>
  </a-form-model>
</template>

<script>
import ProductLibrarySkuChildModal from '@/views/productLibrary/modules/ProductLibrarySkuChildModal'
export default {
  name: 'SkuProductImg',
  components: {
    ProductLibrarySkuChildModal
  },
  props: {
    model: {
      type: Object,
      default: () => {}
    },
    originModel: {
      type: Object,
      default: () => {}
    }
  },
  data(){
    return {
      currentIndex: 0,
      skuModel: {},
      isShow: false,
      skuList: [
        {
          colorDesc: '父',
          imageList: [
            {
              title: '批量上传'
            },
            {
              title: '效果图',
              imageList: [],
              key: 'effectImageList'
            },
            {
              title: '白底图',
              imageList: [],
              key: 'whiteBackgroundImageList'
            },
            {
              title: '尺寸图',
              imageList: [],
              key: 'sizeImageList'
            },
            {
              title: '其他图',
              imageList: [],
              key: 'otherImageList'
            },
            {
              title: '元素图',
              imageList: [],
              key: 'elementImageList'
            }
          ]
        }
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      validatorRules_: {},
    }
  },
  watch: {
    model: {
      immediate: true,
      handler(val){
        this.handleModelImg();
      }
    }
  },
  methods: {
    handleImg(title){
      this.$refs.modalForm.add();
      this.$refs.modalForm.title = title;
      this.$refs.modalForm.disableSubmit = false;
    },
    modalFormOk(imgObj){
      if(imgObj.title === '批量上传'){
        let imageList = (imgObj.imageList && imgObj.imageList.split(',')) || [];
        this.skuList[this.currentIndex].imageList = this.skuList[this.currentIndex].imageList.map(item => {
          if(item.title === '元素图'){
            return {
              ...item
            }
          }
          return {
            ...item,
            imageList: imageList.filter(img => img.indexOf(item.title) > -1) || []
          }
        })
        return;
      }
      if(imgObj.title === '元素图'){
        this.isShow = false;
        this.skuList[this.currentIndex].imageList = this.skuList[this.currentIndex].imageList.map(item => {
          if(item.key === 'elementImageList'){
            return {
              ...item,
              imageList: imgObj.imageList.map(item => item.imageUrl) || [],
              elementList: [...imgObj.imageList]
            }
          }else{
            return item
          }
        })
        return
      }
      this.skuList[this.currentIndex].imageList = this.skuList[this.currentIndex].imageList.map(item => {
        if(item.title === imgObj.title){
          return {
            ...item,
            imageList: (imgObj.imageList && imgObj.imageList.split(',')) || []
          }
        }else{
          return item
        }
      })
    },
    getColorList(){
      this.currentIndex = 0;
      if(!(this.model.skuList && this.model.skuList.length)){
        this.$message.warning('请先生成sku!');
        return;
      }
      let skuList = this.model.skuList.filter((item, index) => {
        let index_ = this.model.skuList.findIndex(cur => cur.color === item.color);
        return index_ === index;
      }) || []
      skuList = skuList.map(item => {
        let curItem = this.skuList.find(cur => {
          if(item.colorDesc){
            return cur.colorDesc === item.colorDesc;
          }
          if(item.color){
            return cur.color === item.color;
          }
        });
        if(curItem){
          return {
            ...curItem
          }
        }else{
          return {
            ...item,
            imageList: [
              {
                title: '批量上传'
              },
              {
                title: '效果图',
                imageList: [],
                key: 'effectImageList'
              },
              {
                title: '白底图',
                imageList: [],
                key: 'whiteBackgroundImageList'
              },
              {
                title: '尺寸图',
                imageList: [],
                key: 'sizeImageList'
              },
              {
                title: '其他图',
                imageList: [],
                key: 'otherImageList'
              },
              {
                title: '元素图',
                imageList: [],
                key: 'elementImageList'
              }
            ]
          }
        }
      })
      this.skuList = [this.skuList[0], ...skuList];
    },
    getImageList(){
      return this.skuList.map(item => {
        let param = {};
        item.imageList.forEach(cur => {
          if(cur.key){
            let curImageList = Array.isArray(cur.imageList) ? cur.imageList : (cur.imageList && cur.imageList.split(',') || []);
            curImageList = curImageList.filter(curChild => curChild);
            if(cur.key === 'elementImageList'){
              param[cur.key] = curImageList.map(child => {
                let elementListImg  = cur.elementList.find(curImg => curImg.imageUrl === child);
                if(elementListImg){
                  return {
                    imageUrl: elementListImg.imageUrl,
                    itemId: elementListImg.type === 'queryById' ? elementListImg.itemId : elementListImg.id
                  }
                }else{
                  return {
                    imageUrl: child
                  }
                }
              })
            }else{
              param[cur.key] = curImageList.map(child => {
                return {
                  imageUrl: child
                }
              })
            }
          }
        })
        if(item.colorDesc === "父"){
          return {
            skuId: this.model.id,
            skuCode: this.model.skuCode,
            type: '1',
            color: '',
            ...param,
          }
        }else{
          return {
            skuId: this.model.id,
            skuCode: item.skuCode,
            type: '2',
            color: item.color,
            ...param,
          }
        }
      })
    },
    handleModelImg(){
      if(this.model.imageList && this.model.imageList[0]){
        let imageList = this.model.imageList[0];
        this.skuList[0].imageList = this.skuList[0].imageList.map(item => {
          if(item.title === '批量上传'){
            return item;
          }else{
            return {
              ...item,
              imageList: imageList[item.key].map(cur => cur.imageUrl),
              elementList: item.title === '元素图' ? this.model.imageList[0].elementImageList && this.model.imageList[0].elementImageList.map(imgItem => {
                return {
                  ...imgItem,
                  type: 'queryById'
                }
              }) : []
            }
          }
        })
      }
    },
    getValidImageList(){
      return new Promise((resolve, reject) => {
        this.$refs.form_.validate(valid => {
          if(valid){
            // 是否定制,选择是后，产品图片中的元素图必须上传
            if(this.model.isCustomize === '1'){
              let flag = this.skuList.every(item => {
                let currentImageList = item.imageList.find(cur => cur.key === 'elementImageList') || {};
                return currentImageList.imageList && currentImageList.imageList.length ? true : false;
              })
              if(!flag){
                this.isShow = true;
              }
              resolve(flag);
            }else{
              resolve(true);
            }
          }else{
            resolve(valid);
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.product-img{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  &>div{
    width: 100%;
    .image-list{
      margin-top: 10px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      &>span{
        img{
          width: 100px;
          height: 100px;
          object-fit: cover;
          border-radius: 4px;
          margin-right: 10px;
          cursor: pointer;
        }
      }
    }
  }
}
.ant-col{
  margin-bottom: 20px;
}
.customUploadOss{
  /deep/.ant-upload{
    display: none !important;
  }
}
</style>